<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>滚动吧！图片~</title>
	</head>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#body_contioner{
				width: 100%;
				height: 600px;
				display:  flex;
				justify-content: center;
				align-items: center;
			}
			#div_contioner{
				width: 100%;
				height: 300px;
				align-items: center;
				border: 1px solid beige ;
				display: flex;
				overflow: hidden;
				border:1 solid red;
			}
			#img_contioner{
				display: flex;
				width: 1600px;
				height: 300px;
			}
			#img_contioner img{
				width: 200px;
				height: 300px;
			}
			body{
				background-color: #000000;
			}
		</style>
	<body>
		<div id="body_contioner">
			<div id="div_contioner" onmouseenter="onMouserL()" onmouseleave="onMouserT()">
				<div id="img_contioner">
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
					<img src="img/b.webp" >
				<!-- 	<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
					<img src="img/3.jpeg" >
					<img src="img/4.jpeg" >
					<img src="img/5.jpeg" >
					<img src="img/6.jpeg" >
					<img src="img/7.jpeg" >
					<img src="img/8.jpeg" >
					<img src="img/9.jpeg" >
					<img src="img/10.jpeg" >
					<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
					<img src="img/3.jpeg" >
					<img src="img/4.jpeg" >
					<img src="img/5.jpeg" >
					<img src="img/6.jpeg" > -->
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	var imgGet=document.getElementById('img_contioner');
	var imgSpeedLeft=0;
	var myImgTerval1=null;
	function SeppedImgLeftFun1(){
		// 16张图片运行结束 则运行结束
			imgSpeedLeft--;
			imgGet.style.marginLeft=imgSpeedLeft+'px';
			if (imgSpeedLeft==-1000) {
				imgSpeedLeft=0;
			};
			if(imgSpeedLeft%200==0){
				clearInterval(myImgTerval1);
				setTimeout(function(){
					myImgTerval1=setInterval(SeppedImgLeftFun1,10);
				},1000);
			};
	};
	// 鼠标进入时
	function onMouserL(){
		console.log('123');
		clearInterval(myImgTerval1);
	};
	// 鼠标退出时
	function onMouserT(){
		console.log('2314');
		// setInterval(SeppedImgLeftFun1,10);
		var i=0;
		for (var i = 0; i < 4; i++) {
			i++;
			if(i=4){
				myImgTerval1=setInterval(SeppedImgLeftFun1,10);	
			}
		}
	};
	
	onload=function(){
		myImgTerval1=setInterval(SeppedImgLeftFun1,10);
	};
	</script>
</html>
